import React from "react";

const Mall = () => {
    return (
        <div className="min-h-screen bg-gray-100">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <h1 className="text-3xl font-bold text-gray-900 mb-8">商城首页</h1>
                
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {/* 商品卡片 */}
                    <div className="bg-white rounded-lg shadow-md overflow-hidden">
                        <img 
                            src="https://via.placeholder.com/300x200" 
                            alt="商品图片"
                            className="w-full h-48 object-cover"
                        />
                        <div className="p-4">
                            <h2 className="text-xl font-semibold text-gray-800 mb-2">商品名称</h2>
                            <p className="text-gray-600 mb-4">商品描述信息，这里可以写一些商品的详细介绍。</p>
                            <div className="flex justify-between items-center">
                                <span className="text-lg font-bold text-red-500">¥99.00</span>
                                <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors">
                                    加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    {/* 重复商品卡片 */}
                    <div className="bg-white rounded-lg shadow-md overflow-hidden">
                        <img 
                            src="https://via.placeholder.com/300x200" 
                            alt="商品图片"
                            className="w-full h-48 object-cover"
                        />
                        <div className="p-4">
                            <h2 className="text-xl font-semibold text-gray-800 mb-2">商品名称</h2>
                            <p className="text-gray-600 mb-4">商品描述信息，这里可以写一些商品的详细介绍。</p>
                            <div className="flex justify-between items-center">
                                <span className="text-lg font-bold text-red-500">¥99.00</span>
                                <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors">
                                    加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white rounded-lg shadow-md overflow-hidden">
                        <img 
                            src="https://via.placeholder.com/300x200" 
                            alt="商品图片"
                            className="w-full h-48 object-cover"
                        />
                        <div className="p-4">
                            <h2 className="text-xl font-semibold text-gray-800 mb-2">商品名称</h2>
                            <p className="text-gray-600 mb-4">商品描述信息，这里可以写一些商品的详细介绍。</p>
                            <div className="flex justify-between items-center">
                                <span className="text-lg font-bold text-red-500">¥99.00</span>
                                <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors">
                                    加入购物车
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Mall;